<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医疗挂号系统</title>
    <script src="/static/med_booking/js/vue.js"></script>
    <script src="/static/med_booking/js/axios.js"></script>
    <!-- 引入element组件库 -->
    <script src="/static/med_booking/js/index.js"></script>
    <link rel="stylesheet" href="/static/med_booking/css/index.css">
    <style>
        body {
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        }

        .el-container {
            height: 100vh;
        }

        .el-aside {
            background-color: #545c64;
            color: #fff;
            height: 100%;
        }

        .el-main {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .system-title {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background-color: #434a50;
            border-bottom: 1px solid #434a50;
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(100vh - 40px);
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .el-menu {
            border-right: none;
        }

        .el-menu-item-group__title {
            padding: 0;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-aside width="220px">
            <div class="system-title">医疗挂号系统</div>
            <el-menu
                    default-active="1-1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse">

                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-management"></i>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="1-1" @click="changeIframe('/department')">
                        <i class="el-icon-office-building"></i>
                        <span>科室管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-2" @click="changeIframe('/doctor')">
                        <i class="el-icon-user"></i>
                        <span>医生管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-3" @click="changeIframe('/user')">
                        <i class="el-icon-user-solid"></i>
                        <span>用户管理</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-date"></i>
                        <span>排班管理</span>
                    </template>
                    <el-menu-item index="2-1" @click="changeIframe('/schedule')">
                        <i class="el-icon-tickets"></i>
                        <span>医生排班</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>病历管理</span>
                    </template>
                    <el-menu-item index="3-1" @click="changeIframe('/medical-record')">
                        <i class="el-icon-notebook-2"></i>
                        <span>病历记录</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>住院管理</span>
                    </template>
                    <el-menu-item index="4-1" @click="changeIframe('/hospitalization')">
                        <i class="el-icon-house"></i>
                        <span>住院登记</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-takeaway-box"></i>
                        <span>挂号管理</span>
                    </template>
                    <el-menu-item index="5-1" @click="changeIframe('/registration')">
                        <i class="el-icon-receiving"></i>
                        <span>挂号记录</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-main>
            <div class="iframe-container">
                <iframe
                        :src="currentIframe"
                        frameborder="0"
                        allowfullscreen
                        loading="lazy">
                </iframe>
            </div>
        </el-main>
    </el-container>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isCollapse: false,
            currentIframe: './department.html'
        },
        methods: {//cccc
            changeIframe(path) {
                this.currentIframe = '/med_booking/src/main/resources/static/med_booking/html/' + path + '.html';
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</body>

</html>